import React from 'react';
import PropTypes from 'prop-types';

import {
    StyleSheet,
    Image,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

const ImageSourcePropType = require('ImageSourcePropType');

export default class CommonSelectButton extends React.Component {

    static propTypes = {
        // 普通状态
        imageUri: ImageSourcePropType,
        imageStyle: PropTypes.number,

        // 选中状态
        selectedImageUri: ImageSourcePropType,

        // 监听点击
        onPressIn: PropTypes.func,
        onPressOut: PropTypes.func,

        // 选中状态
        selected: PropTypes.bool,

        // 按钮样式
        buttonStyle: PropTypes.object

    };

    constructor(props, context) {
        super(props, context);
        this.state = {
            selected: this.props.selected,
        }
    }

    render() {
        var source = this.props.selected ? this.props.selectedImageUri : this.props.imageUri;
        var text = this.props.selected ? "开 启" : "关 闭"
        return (
            <TouchableOpacity style={[styles.buttonStyle, this.props.buttonStyle]}
                onPressIn={() => {
                    if (this.props.onPressIn) {
                        this.props.onPressIn(this);
                    }
                }}
                onPressOut={() => {
                    if (this.props.onPressOut) {
                        this.props.onPressOut(this);
                    }
                }}
                activeOpacity={this.props.selectedImageUri? 0.9 : 0.3}
            >
                <View style={[styles.viewStyle]}>
                    <Image source={source} style={[this.props.imageStyle]} />
                    <Text style={{ marginLeft: 30, fontWeight: "bold", fontSize: 16, color: this.props.selected ? "#49EF2E" : "white" }}>{text}</Text>
                </View>
            </TouchableOpacity>
        );
    }
}

var styles = StyleSheet.create({
    buttonStyle: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    viewStyle: {
        flexDirection: 'column',
        alignItems: 'center',
    }
});
